import {designPage, onMounted, useRefs} from "plain-design-composition";
import {MenuGroups} from "./menus";
import {$nav} from "../nav/$nav";
import {Scroll} from "../../../packages";
import CheckOutlined from '@ant-design/icons/CheckOutlined';

export const AppMenu = designPage(() => {

  const { refs, onRef } = useRefs({ scroll: Scroll });

  onMounted(async () => {
    const activeEl = refs.scroll?.refs.content?.querySelector('[data-active=true]') as HTMLElement;
    !!activeEl && refs.scroll?.methods.scrollTop(activeEl.offsetTop - 100);
  });

  return () => (
    <div className="app-menu">
      <Scroll ref={onRef.scroll}>
        {MenuGroups.map(group => (
          <div className="app-menu-group" key={group.name}>
            <div className="app-menu-group-name">{group.name}</div>
            {group.children.map(child => (
              <div
                className="app-menu-item"
                data-active={String(child.page === $nav.state.route.path)}
                key={child.name + child.title}
                onClick={() => {
                  $nav.history.push(child.page);
                }}>
                <div>
                  <span>{child.name}</span>
                  <span>{child.title}</span>
                </div>
                {!!child.complete && <CheckOutlined/>}
              </div>
            ))}
          </div>
        ))}
        <div style={{ height: '200px' }}/>
      </Scroll>
    </div>
  );
});
